<template>
  <div class="common-page">
    <title-view title="容器" icon="item-register"></title-view>
    <div class="common-flex-align-center">
      <top-line-box>123</top-line-box>
      <top-line-box outer-color="#F45725" inner-color="#F6EBEA">123</top-line-box>
      <top-line-box outer-color="#4AC99B" inner-color="#EFFAF4">123</top-line-box>
    </div>
    <title-view title="图标文字" icon="item-register"></title-view>
    <icon-item icon="clear" value="连接成功"></icon-item>
    <icon-item :icon="addIcon" value="连接成功" type="img"></icon-item>
    <icon-item
      :icon="addIcon"
      value="连接成功"
      type="img"
      :options="{ color: '#336699', gap: 10, iconSize: 24, iconColor: '#123456', size: 20 }"
    ></icon-item>
    <icon-item icon="clear" :options="{ slot: true }">
      <div class="common-underline-link">123</div>
    </icon-item>
    <title-view title="升级加载条" icon="item-register"></title-view>
    <div class="progress-view">
      <div class="label">算力棒1 V1.0.0</div>
      <t-progress class="progress" :percentage="100"></t-progress>
      <div class="res">
        <svg-icon class="icon" name="progress-success"></svg-icon>
        <div class="text">升级成功</div>
      </div>
    </div>
    <div class="progress-view">
      <div class="label">算力棒1 V1.0.0</div>
      <t-progress class="progress" :percentage="60"></t-progress>
      <div class="res">
        <svg-icon class="icon" name="progress-loading"></svg-icon>
        <div class="text">升级中…</div>
      </div>
    </div>
    <div class="progress-view">
      <div class="label">算力棒1 V1.0.0</div>
      <t-progress class="progress" :percentage="60"></t-progress>
      <div class="res">
        <svg-icon class="icon" name="progress-error"></svg-icon>
        <div class="text">升级中…</div>
      </div>
    </div>
    <div class="progress-view">
      <div class="label">算力棒1 V1.0.0</div>
      <t-progress class="progress" :percentage="60"></t-progress>
      <div class="res">
        <svg-icon class="icon" name="progress-waiting"></svg-icon>
        <div class="text">升级中…</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import addIcon from '@/assets/images/add.png';
import TopLineBox from '@/components/box/TopLineBox.vue';
import IconItem from '@/components/item/IconItem.vue';
</script>

<style lang="less" scoped>
.progress-view {
  display: flex;
  align-items: center;
  font-size: 12px;
  gap: 10px;

  .label {
    color: #333;
  }

  .progress {
    width: 324px;
  }

  .res {
    display: flex;
    align-items: center;

    .icon {
      margin-right: 2px;
    }

    .text {
      color: #4ac99b;
    }
  }
}
</style>
